<template>
  <div class="my-arrow cursor" @click="click">
    <img v-if="arrow==='left' && color==='black'" :src="require('../assets/left-black.png')"
         :style="{width:size+'px',height:'auto'}">
    <img v-if="arrow==='right' && color==='black'" :src="require('../assets/right-black.png')"
         :style="{width:size+'px',height:'auto'}">
    <img v-if="arrow==='left' && color==='white'" :src="require('../assets/left.png')"
         :style="{width:size+'px',height:'auto'}">
    <img v-if="arrow==='right' && color==='white'" :src="require('../assets/right.png')"
         :style="{width:size+'px',height:'auto'}">
  </div>
</template>

<script>
export default {
  name: "arrow",
  props: {
    //箭头方向
    arrow: {
      type: String,
      validator: (value) => {
        return ["left", "right"].indexOf(value) !== -1;
      }
    },
    //箭头颜色
    color: {
      type: String,
      validator: (value) => {
        return ["black", "white"].indexOf(value) !== -1;
      }
    },
    //箭头大小
    size: {
      type: Number,
      default: 14
    }
  },
  methods: {
    click() {
      this.$emit("click")
    }
  }
}
</script>

<style scoped>

</style>